/* components */
import { BaseSelectUserDepartmentItem } from '@src/component/common/BaseSelectUser/components'
/* enum */
import { BaseSelectUserComponentNameEnum, SelectUserComponentDepartment } from '@src/component/common/BaseSelectUser/model'
/* scss */
import '@src/component/common/BaseSelectUser/components/Department/index.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, defineComponent, PropType } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'

export type DepartmentProps = {
  isMulti: boolean;
  value: SelectUserComponentDepartment[];
  showChildren: boolean;
  showChildrenIcon: boolean;
}

export interface DepartmentSetupState {
  
}

export enum DepartmentEmitEventNameEnum {
  Input = 'input',
  Click = 'click',
}

export type DepartmentInstance = ComponentInstance & DepartmentSetupState
export type DepartmentVM = ComponentRenderProxy<DepartmentProps> & CommonComponentInstance & DepartmentInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserDepartment,
  emits: [
    DepartmentEmitEventNameEnum.Input,
    DepartmentEmitEventNameEnum.Click,
  ],
  props: {
    /* 是否为多选状态 */
    isMulti: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    /* 是否显示子部门 */
    showChildren: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    value: {
      type: Array as PropType<SelectUserComponentDepartment[]>,
      default: () => []
    }
  },
  setup(props: DepartmentProps, { emit }) {
    
  },
  methods: {
    onClickHandler(value: SelectUserComponentDepartment) {
      this.$emit(DepartmentEmitEventNameEnum.Click, value)
    }
  },
  render(h: CreateElement) {
    return (
      <div class={BaseSelectUserComponentNameEnum.BaseSelectUserDepartment}>
        
        {this.value.map((department, index) => {
          return (
            <BaseSelectUserDepartmentItem 
              key={department.id}
              value={department} 
              is-multi={this.isMulti} 
              show-children={this.showChildren}
              onClick={this.onClickHandler}
              onLowerClick={this.onClickHandler}
            />
          )
        })}
        
      </div>
    )
  }
})
